<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body{
      background-color: #BDBDBD;
    }
    .box {
      display: flex;
      flex-wrap: wrap;
    }

    .num{
      width: 45px;
      height: 80px;
      background-size:cover
    }

    .item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-size:cover
    }

    .message {
      font-size: 14px;
      display: flex;
      justify-content:space-between;
    }

    .content{
      border: none;
      box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
      padding: 4px;
      margin: 4px;
    }

    .landmines{
      display: flex;
      justify-content:center;
    }
    .head{
      border: 5px solid #808080;
      border-left-color: #fff;
      border-top-color: #fff;
    }
    table {
      border-collapse:collapse;
      width:100%;
    }
    th, td, th{
      border: 2px solid #808080;
      border-left-color: #fff;
      border-top-color: #fff;
      text-align:left;
      padding:8px;
      margin: 2px;
    }
    th{
      text-align:center
    }
    
  </style>
</head>

<body>
  <div id="app">
    <div class="message content">
      <div class="landmines">
      </div>

      <div class="head" style="background-size:cover;width:70px;height:70px;background-image: url(data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AL29vQAAACH5BAAHAP8ALAAAAAAVABUAAAJAlI+py50AoUMwWCsduBy33XXAAoaiUlZY+nBq8MKUSY9HSbtzft4X/vu1MCLhcBXRoXgyBlD5AWYmgsiUis0yCgA7)"></div>

      <div class="head" style="background-size:cover;width:70px;height:70px;background-image:url({{headurl}})"></div>
      
    </div>
    <div class="box1" style="text-align: center;">
      <div class="box content" >

        <table id="help">
          <tbody>
            <tr>
              <th>指令</th>
              <th>说明</th>
              <th>注意</th>
              <th>示例指令</th>
            </tr>
            <tr>
              <td>{{prefix}}扫雷<br></td>
              <td>开始游戏</td>
              <td></td>
              <td>{{prefix}}扫雷</td>
            </tr>
            <tr>
              <td>{{prefix}}结束扫雷</td>
              <td>结束游戏</td>
              <td></td>
              <td><br>{{prefix}}结束扫雷</td>
            </tr>
            <tr>
              <td>{{prefix}}扫雷加载模板</td>
              <td>更新或下载html模板</td>
              <td>可能会遇到更新后用不了的情况，也许这时候我正在改</td>
              <td>{{prefix}}扫雷加载模板</td>
            </tr>
            <tr>
              <td>{{prefix}}扫雷难度</td>
              <td>使用指定难度开始游戏</td>
              <td>数量多的时候字就小</td>
              <td>{{prefix}}扫雷难度(简单|普通|困难)</td>
            </tr>
            <tr>
              <td>{{prefix}}翻开</td>
              <td>翻开指定的位置</td>
              <td>可以一次输入多个坐标，不区分大小写</td>
              <td><br>{{prefix}}翻开a1a8h0h9</td>
            </tr>
            <tr>
              <td>{{prefix}}标记</td>
              <td>标记指定的位置</td>
              <td>同上</td>
              <td><br>{{prefix}}标记a1a8h0h9</td>
            </tr>
            <tr>
              <td>{{prefix}}取消标记</td>
              <td>取消标记指定的位置</td>
              <td>同上</td>
              <td><br>{{prefix}}取消标记a1a8h0h9</td>
            </tr>
            <tr>
              <td><br>扫雷设置指令前缀</td>
              <td>设置前缀避免指令冲突</td>
              <td>设置了之后，原本的指令依旧有效</td>
              <td>扫雷设置指令前缀#</td>
            </tr>
            <tr>
              <td>{{prefix}}扫雷设置地雷数量</td>
              <td>设置当前难度的地雷数量</td>
              <td></td>
              <td>{{prefix}}扫雷设置地雷数量50</td>
            </tr>
            <tr>
              <td>{{prefix}}扫雷设置布局</td>
              <td>自定义宽高格子数量和雷数量</td>
              <td>大小不建议超过26，分为三个参数：宽 高 雷；使用空格隔开即可，不设置雷则回到默认值：10</td>
              <td>{{prefix}}扫雷设置布局15 15 20</td>
            </tr>
            <tr>
              <td>更新扫雷</td>
              <td>更新或安装‘扫雷插件’</td>
              <td>需要安装‘更新扫雷.js’插件</td>
              <td>更新扫雷</td>
            </tr>
          </tbody>
          <colgroup>
            <col style="width: 25%;">
            <col style="width: 25%;">
            <col style="width: 25%;">
            <col style="width: 25%;">
          </colgroup>
        </table>

      </div>
    </div>
    
  </div>

  <script type="text/javascript">

    /** 
     * yep：微笑
     * xx：寄了
     * num：显示的数字
     * landmine：地图样式
     * 0：翻开空
     * 1-8：雷数量
     * 9：雷
     * -：未翻开
     * +：标记
     * x：踩中的雷
    */
    const icon = {
      xx:'data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AMDAwAAAACH5BAAHAP8ALAAAAAAVABUAAAJDlI+py50AoUMwWCsduBy33XXAAm5gYHrPdWLs6p6parShSN36eNg6LbBFKhxejyV6wXwo4PGH+vyMDCKLqhlOttxuAQA7',
      yep:'data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AL29vQAAACH5BAAHAP8ALAAAAAAVABUAAAJAlI+py50AoUMwWCsduBy33XXAAoaiUlZY+nBq8MKUSY9HSbtzft4X/vu1MCLhcBXRoXgyBlD5AWYmgsiUis0yCgA7',
      num:{
        0:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmoMRymoc0vqt/G1hB1JkZVKKaQSC60YI/NZPW8dpApZrqvKhfkIPkIi5jFANWUkS5CUKADs=',
        1:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI3lI8psc33mDQAmilAdUnv1mkXeHhWuGGlOCpsxGXIpII0dYbjs358v0PlgDGiDfQKPj6cmkJRAAA7',
        2:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI8lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl962QVIYgfFAwta3JBu6i0UHwgp6cztQT/jCSZWTmGN5kn08BADs=',
        3:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl962QVIYgXMGUvJFebnRi6/qpcECU8OB7XYK2CNIm+3wKADs=',
        4:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI8lI8psc0HDJsmCmDptdhCXIFIF3rlOYpkyplftXWgJ9cHU8+3skkNu0usNB/PA+gQin4a0YPyMEF/PF4BADs=',
        5:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmgtmxSZotYhql2gX1GUbWZ6heSWGCEkWLHNmHR0iwnmKvVOZgiAWr2cU3jBIHKpmc7kKADs=',
        6:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmgtmxSZotYhql2gX1GUbWZ6heSWGCEkWLHPRiJE2woFPvxupeEDU0HeM5XQ4B6oWdCEKADs=',
        7:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl963buIUejLziHZnkfOpHl/qtcCoU0dDBpVy8WO0W/EgLADs=',
        8:'data:img/gif;base64,R0lGODlhDQAXAIAAAP8AAAAAACH5BAQUAP8ALAAAAAANABcAAAI0jI8Jy3wQmoMRymoc0vqt/G1hB1JkZVKKiTaRJ4VvbIGJja6pWvbirvPBbJdRawKL3ZaGAgA7',
        9:'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI6lI8Jy3wgmoMRymoc0vqt/G1hB1JkZVKKiTaRJ4VC0E4HnWDzLqp4b6D9SrecRrjy1XS0mAUWy0kNBQA7',
      },
      landmine:{
        0:'data:img/gif;base64,R0lGODlhGQAZAKIAAM7OzsbGxr6+vra2trKysqampoKCggAAACH5BAAHAP8ALAAAAAAZABkAAANHaLrc3mWQSau9xAwQuv9gGBhEIJxoqq4CabLw6sY0Otf0jcP6Lpc+HjD4exFTvWNrqDwlj09iNDj1VXdXXLa2zTGb3VgYlgAAOw==',
        1:'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAA/wAAACH5BAQUAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuLIRC9lFiSAbZOWqqybZVCcWoC8fpeu5gj/uJfBUWMXebvYpAJdJGoQFsTc8yQh1OpJ3otesEH8XbLzlSAAA7',
        2:'data:img/gif;base64,R0lGODlhGQAZALMAAMDAwKu5q6i4qKW3pZy0nJaylpCwkIquioCAgACAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAReEMlJq704X8C7/yAnhSQ5lmh3cknrvi64wvT7zXV9I50N+ipeihXzrFACoEhYMtB2pSSsIGN6CrRBIHQEEGjb0pEmGOJch+Gyl3samW13kB0vztViKx665+r7a4AfEQA7',
        3:'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiOFIfiZbSmabT16le0EWyRdeg+OZTGzL5JECBsFI86m4AGIfpzEB9RVLPVuWtqFnjVZeJgmdjzbBMRk8KADs=',
        4:'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAAmQAAgCH5BAAHAP8ALAAAAAAZABkAAAJdjI+py70Ao5wUmorxzTzuOgjAQJLUN5FiaU5oVK7sGVAxxA50Gor47KrBVJLc7hfilY6jnHMp+TynwYjgisXmfB4hx1jtgKPezLjbaULJ6bOlnK684mG6HG5H5ykFADs=',
        5:'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgIAAAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2oodDKmzx9bybeWgW6L9gDZcjLgz3oo9HhPw6TxPyGRTVxUIs1ohjxL9SsLia3nsO0MKADs=',
        6:'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgACAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJTjI+py70Ao5wUmorxzTxuKITiKFIfiZbTmaJmEI3dCoPqbNWAjOdxS3r9gDyPjhiUsEKVos/GpDgBS0Hz9twhsdTjNmqUfIU9ja5MQ1c+6nBbUgAAOw==',
        7:'data:img/gif;base64,R0lGODlhGQAZAJEAAL6+voKCggAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2rUiHIOz9HElznY771NRcpQfrWI8TpJK2S1DtD2hPWeoRhTGojVgV1P9NsWWMBlSAAA7',
        8:'data:img/gif;base64,R0lGODlhGQAZAIAAAMDAwICAgCH5BAQUAP8ALAAAAAAZABkAAAJKjI+py70Ao5wUmorxzTxu63xeMIYi8JnHlK4UwpLgOctjaUuwnqtvb/rxQsJaZXcz/k4tGsqVfPp4OCK1yih2OM7t1avJgWNjTAEAOw==',
        9:'data:img/gif;base64,R0lGODlhGQAZAJEAAP///76+voKCggAAACH5BAAHAP8ALAAAAAAZABkAAAJglI+py70Bo5wUmhrHwPFyzVlCCIYeBGqqik5nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OBSQ4yv6/aQAADs=',
        'x':'data:img/gif;base64,R0lGODlhGQAZAJEAAP///4CAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJgjI+py70Co5wUmhrHwPFyzVlBCIYeBGqqik6nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OCSQ4yv6/aQAADs=',
        '+':'data:img/gif;base64,R0lGODlhGQAZAKIAAP///8DAwICAgP8AAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAANsCLrcriG8OSO9KwiRo//gt3FQaIJjZw7DmZYh25ovEMtzWH+47G6qno8GhAWEOVTRBur9SMxbUrQ8BQiEpyqE1RpBXSLUGtZVI9i0Wu3ZodfwbMR9ja/bZ6s3qjeTNCOBgoMjc4SHhIaIixsJADs=',
        '-':'data:img/gif;base64,R0lGODlhGQAZAJEAAP///8DAwICAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJKhI+pFrH/GpwnCFGb3nxfzHQi92XjWYbnmAIrepkvGauzV7s3Deq71vrhekJgrtgIIpVFptD5g+6kN+osZflot9xPsgvufsPkSwEAOw==',
      },
    }

    // 帮助
    let help = '{{ishelp}}'
    if(help === 'off') {
    document.getElementById("help").innerHTML = ""
  
    // 导入地图，遍历地图，输出
  
    // arr传入示例
    // const arr = '0,"-","+","x",1,2,3,4,5,8,9';
    let arr = '{{map}}';
    let x = '{{x}}';
    let mun = '{{muns}}'; // 显示的数字

    mun = mun.split(',');
    let numbers = arr.split(',');

    let map = [] // 地图
    let munmap = [] // 显示的数字

    // 遍历numbers，每x个数换一行
    for (var i = 0; i < numbers.length; i += x) {
      map.push(numbers.slice(i, i+x));
      munmap.push(mun.slice(i, i+x));
    }

    let c = '{{c}}'
    let size = +c / map[0].length // 每一个格子的大小
    let sty = `width:${size}px;height:${size}px;`

    const l = '{{l}}' // 雷的数量

  
    var tb = [] // 格子内容
    var lei = [] // 雷的数量
    const box = document.querySelector('.box');
    const landmines = document.querySelector('.landmines');
    const app = document.getElementById('app');

    const lnum = {
      0: `<div class="num" style="background-image: url(${icon.num['0']})"></div>`,
      1: `<div class="num" style="background-image: url(${icon.num['1']})"></div>`,
      2: `<div class="num" style="background-image: url(${icon.num['2']})"></div>`,
      3: `<div class="num" style="background-image: url(${icon.num['3']})"></div>`,
      4: `<div class="num" style="background-image: url(${icon.num['4']})"></div>`,
      5: `<div class="num" style="background-image: url(${icon.num['5']})"></div>`,
      6: `<div class="num" style="background-image: url(${icon.num['6']})"></div>`,
      7: `<div class="num" style="background-image: url(${icon.num['7']})"></div>`,
      8: `<div class="num" style="background-image: url(${icon.num['8']})"></div>`,
      9: `<div class="num" style="background-image: url(${icon.num['9']})"></div>`,
    }
  
    const cs = {
      '-': `<div class="item" style="${sty}background-image: url(${icon.landmine['-']})">`,
      '+': `<div class="item" style="${sty}background-image: url(${icon.landmine['+']})">`,
      'x': `<div class="item" style="${sty}background-image: url(${icon.landmine['x']})">`,
      0: `<div class="item" style="${sty}background-image: url(${icon.landmine['0']})">`,
      1: `<div class="item" style="${sty}background-image: url(${icon.landmine['1']})">`,
      2: `<div class="item" style="${sty}background-image: url(${icon.landmine['2']})">`,
      3: `<div class="item" style="${sty}background-image: url(${icon.landmine['3']})">`,
      4: `<div class="item" style="${sty}background-image: url(${icon.landmine['4']})">`,
      5: `<div class="item" style="${sty}background-image: url(${icon.landmine['5']})">`,
      6: `<div class="item" style="${sty}background-image: url(${icon.landmine['6']})">`,
      7: `<div class="item" style="${sty}background-image: url(${icon.landmine['7']})">`,
      8: `<div class="item" style="${sty}background-image: url(${icon.landmine['8']})">`,
      9: `<div class="item" style="${sty}background-image: url(${icon.landmine['9']})">`,
    }

    for (let i in l) {
      lei.push(lnum[l[i]])
    }
  
    for (let i in map) {
      for (let j in map[i]) {
        if(map[i][j] == '-' || map[i][j] == '+'){
          let p = `<div class="number">${munmap[i][j]}</div>`
          tb.push(`${cs[map[i][j]]}${p}</div>`)
        }else{
          tb.push(`${cs[map[i][j]]}</div>`)
        }
      }
    }

    landmines.innerHTML = lei.join('')
    box.innerHTML = tb.join('')
  }
  </script>

</body>

</html>